<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>

<body>


  <button id='takephoto'>拍照</button>
  <button id='qrcode'>扫描二维码</button>
  <button id="position">获取地理位置</button>
  <hr />

  <img src="" id="img" alt="">

  <div id="content"></div>

  <script>

    fetch('/jsapi').then((res) => res.json()).then((res) => {
      console.log(res)
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.appID, // 必填，公众号的唯一标识
        timestamp: res.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.nonceStr, // 必填，生成签名的随机串
        signature: res.signature,// 必填，签名
        jsApiList: ['openLocation', 'chooseImage', 'scanQRCode'] // 必填，需要使用的JS接口列表
      });

      document.getElementById('takephoto').addEventListener('click', () => {
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            console.log(res);
            console.log(localIds[0]);
            document.getElementById('img').src = localIds[0];
          }
        });
      })



      document.getElementById('qrcode').addEventListener('click', () => {
        wx.scanQRCode({
          needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (res) {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            alert(result)
            document.getElementById('content').innerHTML = result;
          }
        });
      })



      document.getElementById('position').addEventListener('click', () => {
        wx.getLocation({
          type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
          success: function (res) {
            console.log(res);
            document.getElementById('content').innerHTML = res;
          }
        });
      })






    })


  </script>
</body>

</html>